<template>
  <div>
    <van-index-bar :index-list="indexList" highlight-color="#ff5f16">
      <template v-for="(item, key, index) in cities">
        <van-index-anchor :key="key" :index="key" />
        <template v-for="val in item">
          <van-cell :name="val.cityId" :title="val.name" />
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import { getCityApi } from '@/api/cityApi'
export default {
  data() {
    return {
      cities: [],
    }
  },
  computed: {
    indexList() {
      return Object.keys(this.cities)
    },
  },
  created() {
    this.$store.commit('setPageFooter', false)
  },
  beforeDestroy() {
    this.$store.commit('setPageFooter', true)
  },
  async mounted() {
    this.cities = await getCityApi()
  },
}
</script>

<style lang="scss" scoped>
::v-deep .van-index-bar__index {
  padding-top: 10px;
}
</style>